<template>
  <div class="xlsx-table">
    <div class="operation-btn" v-if="showButton">
      <a-button type="primary" @click="addRows">新增10行</a-button>
    </div>
    <div :id="containerId"></div>
  </div>
</template>
<script lang="ts">
export default {
  name: "XlsxTable"
};
</script>
<script lang="ts" setup>
import { onMounted, ref, toRefs, watch } from "vue";
import Handsontable from "handsontable";
import "handsontable/dist/handsontable.full.css";
const props = withDefaults(
  defineProps<{
    columns: Array<XlsxTable.ColumnItem>;
    tableData: Array<Base.GeneraDataType>;
    minRows?: number;
    config: Base.GeneraDataType;
    colWidths: Array<string> | number;
    showButton?: boolean;
    //展示增加行数按钮
  }>(),
  {
    minRows: 200,
    colWidths: 160,
    showButton: true
  }
);
const { columns, colWidths, config, minRows, tableData, showButton } = toRefs(props);
const containerId = ref<string>(`xlsx-table-${Date.now()}`);
const xlsxTable = ref<any>(null);
const addRows = () => {
  xlsxTable.value.updateSettings({
    minRows: tableData.value.length
  });
};
onMounted(() => {
  const container = document.querySelector(`#${containerId.value}`);
  xlsxTable.value = new Handsontable(
    container as Element,
    Object.assign(
      {
        data: tableData.value,
        rowHeaders: true, // 是否渲染行头
        colWidths: colWidths.value,
        // colHeaders: ['系统箱号', 'FBA箱号', '实重(KG)', '长(CM)', '宽(CM)', '高(CM)'],
        columns: columns.value,
        fillHandle: true, // possible values: true, false, "horizontal", "vertical",
        height: "auto",
        minRows: minRows.value,
        licenseKey: "non-commercial-and-evaluation"
      },
      config.value
    )
  );
  xlsxTable.value.loadData(tableData.value);
});
watch(
  () => tableData.value,
  (v: Array<Base.GeneraDataType>) => {
    xlsxTable.value.loadData(v);
  }
);
</script>
<style lang="stylus" scoped>
.xlsx-table{
    width: 100%;
    .operation-btn{
        padding: 12px 0;
    }
}
</style>
